<template>
  <div class="index">
    <!-- 频道列表 -->
    <van-tabs v-model="curIndex">
      <van-tab
        v-for="channel in channels"
        :key="channel.id"
        :title="channel.name">
        <!-- 频道与文章列表是一一对应的。每个频道都需要有一个文章列表组件。
          article-list写在了v-for中，则每次循环都会生成一个文章列表组件。
          van-tab具有类似于 懒加载的效果： 只有激活了当前的tab，才会去创建文章列表组件 -->
        <article-list @showMoreAction="hshowMoreAction" :channel="channel"></article-list>
      </van-tab>
    </van-tabs>
    <!-- 频道列表 开关 通过定位 -->
    <div class="bar-btn"
      @click="showChannelEdit=true"
      v-if="$store.getters.isLogin">
        <van-icon name="wap-nav"/>
    </div>

    <!-- 文章---更多操作
      https://vant-contrib.gitee.io/vant/#/zh-CN/popup
    -->
    <!-- 1. 在子组件监听 不感兴趣 -->
    <!-- 2. 在子组件监听 举报文章 -->
    <van-popup  v-model="showMoreAction" :style="{ width: '80%' }">
      <!--
        @dislike="hDislike"： 处理不感兴趣
        @report="hReport": 处理举报
      -->
      <more-action @report="hReport" @dislike="hDislike" ref="refMoreAction"></more-action>
    </van-popup>
    <!-- 频道编辑弹层 -->
    <van-action-sheet
      v-model="showChannelEdit"
      title="频道管理">
      <!-- 1.父传子。:channels="channels" 把当前频道数据传给子组件channelEdit.vue -->
      <!-- 2.子传父。@updateCurChannel="hUpdateCurChannel" 接收子组件的信息 -->
      <!-- 3.父传子。 :curIndex="curIndex" 将当前频道的下标传给子组件实现高亮-->
      <channel-edit
        :channels="channels"
        @updateCurChannel="hUpdateCurChannel"
        :curIndex="curIndex"
        @fixedIndex="hFixedIndex"></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
import ChannelEdit from './channelEdit'
import { getChannels } from '@/api/channel.js'
import ArticleList from './articleList.vue'
import MoreAction from './moreAction'
import { dislikeArticle, reportArticle } from '@/api/article.js'
export default {
  name: 'home',
  data () {
    return {
      // 表示当前选中频道得到索引值
      curIndex: 0,
      // 默认不展示频道管理弹层
      showChannelEdit: false,
      // 频道列表
      channels: [],
      // 默认不展示更多操作的弹层
      showMoreAction: false,
      // 要删除的文章id
      articleId: null
    }
  },
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  created () {
    this.loadChannels()
  },
  // computed: {
  //   // 表示当前选择中频道的编号
  //   channelId () {
  //     return this.channels[this.curIndex].id
  //   }
  // },
  methods: {
    hFixedIndex (idx) {
      this.curIndex = idx
    },
    // 处理频道管理中的 hUpdateCurChannel（接收子组件的信息）
    hUpdateCurChannel (idx) {
      // 1.)
      this.showChannelEdit = false
      // 2.)
      // 频道列表channelId当前频道的id
      // channel.id表示子组件 传过来的点击的频道id
      this.curIndex = idx
    },
    // 删除文章
    delArticle () {
      const obj = {
        articleId: this.articleId, // 当前的文章编号
        channelId: this.channels[this.curIndex].id // 当前频道id1
      }
      this.$eventBus.$emit('delArticle', obj)
    },
    // 处理用户在弹层选择的 反馈垃圾内容类型
    async hReport (reportTypeId) {
      console.log('父组件收到举报的文章类别id:', reportTypeId)
      // 1.调用接口
      const result = await reportArticle(this.articleId, reportTypeId)
      console.log(result);
      // 2.关闭弹层
      this.showMoreAction = false
      // 3.删除文章
      this.delArticle()
    },
    // 获取频道列表
    async loadChannels () {
      const result = await getChannels()
      console.log(result);
      this.channels = result.data.data.channels
    },
    // 处理子组件articleAction抛出的，关闭按钮--并保存指定的文章id
    hshowMoreAction (articleId) {
      // console.log('收到从子组件中传递的文章编号', articleId)
      // 显示弹层
      this.showMoreAction = true
      // 保存文章编号
      this.articleId = articleId
      // 1.确保moreAction组件中的isReport为false
      // 本质上是：在父组件中修改子组件中的数据项--
      // 思路：在父组件中获取子组件的引用，并直接修改子组件的数据
      console.log(this.$refs.refMoreAction);
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false
      }
    },
    // 处理子组件moreAction.vue抛出的不感兴趣-并删除
    async hDislike () {
      console.log('从子组件收到，用户不感兴趣，要删除的文章编号：', this.articleId)
      try {
        // 1. 调用后端接口
        const result = await dislikeArticle(this.articleId)
        console.log(result);
        // 2. 退出弹层
        this.showMoreAction = false
        // 3. 通知文章列表去删除那个被点击的文章
        this.delArticle()
        this.$toast.success('操作成功')
      } catch (e) {
        this.$toast.fail('操作失败')
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
